<template>
    <div class="view">
        <nav-bar title="聊天记录" @clickLeft="back">
            <div class="back" slot="left">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="log-wrap">
            <cube-scroll ref="scroll" :options="options" :data="logList" @pulling-up="onPullingUp">
                <div class="chat-log-flex" :id="'msg-'+item.identification" :style="{order:item.timeStamp}" v-for="(item,index) in logList" :key="item.identification">
                    <chat-box :type="item.type" :text="item.text" :isSelf='item.isSelf' :faceUrl="item.avatar" :thisTime="item.timeStamp">
                        <div class="msg-gift-content" slot="content" v-if="item.type === 101">
                            <div class="msg-gift-picture">
                                <img :src="item.text.image.file_path">
                            </div>
                            <div class="msg-gift-text animated infinite pulse slow" v-if="!item.isSelf">{{chatTargetInfo.nickName}}送你一个<span>【{{item.text.name}}】</span>,送个礼物感谢TA吧</div>
                            <div class="msg-gift-text animated infinite pulse slow" v-else>你送给 {{chatTargetInfo.nickName}} 一个<span>【{{item.text.name}}】</span></div>
                        </div>
                    </chat-box>
                </div>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import ChatBox from "../components/aui/ChatBox.vue";
    import NavBar from "../components/aui/NavBar.vue";
    import ChatMessageUnit from "@/unit/ChatMessageUnit";
    // import Recorder from 'js-audio-recorder';

    @Component({
        components: {
            NavBar, ChatBox
        },
    })
    export default class ChatLog extends Scene {
        private page: number = 1;
        private size: number = 10;
        private isLoaded: boolean = false;
        private logList: any[] = [];
        private loadTime: number = Date.parse(String(new Date())) / 1000;
        private chatTargetInfo: any = {};

        @State("UserStore")
        private user!: InterfaceUser;

        private get options(): any {
            let pullUpLoad: any | boolean = {
                threshold: 50,
                txt: {
                    more: "加载聊天记录",
                    noMore: "没有更多聊天记录惹！"
                },
                visible: true
            };
            if (this.isLoaded && this.logList.length === 0) {
                (pullUpLoad as boolean) = false;
            }
            return {
                pullUpLoad
            };
        }

        private get friendId(): string {
            return String(this.$route.query.friendId || 0);
        }

        private mounted() {
            this.$nextTick(() => {
                this.getChatTargetInfo();
            });
        }

        private onPullingUp(): void {
            setTimeout(() => {
                this.getLogList();
            }, 500);
        }

        private async getLogList(): Promise<any> {
            const res = await Http.post(this.api.getChatLoad, {toid: this.friendId, page: this.page, size: this.size, time: this.loadTime}, {token: this.user.token});
            if (res.code === 1) {
                if (this.page === 1) {
                    this.logList.splice(0, this.logList.length);
                }
                if (res.data.data.length > 0) {
                    for (const i in res.data.data) {
                        this.logList.push(this.logToItem(res.data.data[i]));
                    }
                    // this.logList.push(this.logToItem(...res.data.data));
                    this.page++;
                }
                this.$nextTick(() => {
                    if (res.data.data.length < this.size) {
                        (<any> this).$refs.scroll.forceUpdate(false, false);
                    }
                });

            } else {
                this.globalSingleResultToast(res);
            }
            this.isLoaded = true;
        }

        private back() {
            this.navigateBack();
        }

        private getChatTargetInfo(): void {
            Http.get(this.api.getChatObjectInfo, {user_id: this.friendId}, {token: this.user.token}).then((res) => {
                res.data.avatar = this.userFaceSafeHandle(res.data);
                this.chatTargetInfo = res.data;
                this.getLogList();
            });

        }

        private logToItem(data: any): any {
            let log: any = [];
            log = {
                abnormal: 0,
                avatar: data.from_avatar + "?imageView2/0/h/50",
                fromId: data.fromid,
                identification: data.identification,
                isSelf: data.fromid === this.user.userId,
                text: ChatMessageUnit.replaceContent(data.content),
                timeStamp: data.time,
                toId: data.toid,
                type: data.type
            };
            if (log.type === 2) {
                // log[data.identification].text = log[data.identification].text.file_path;
                // log[data.identification].text = log[data.identification].text.replace('img[','').replace(']','')
            } else if (log.type === 4) {
                log.type = 101;
                // log[data.identification].text = log[data.identification].content;
            }
            return log;

        }
    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        width 100vw;
        background $theme-page-chat-background-color;
        overflow hidden;

        .log-wrap
            width 100vw;
            height 100vh
            padding calc(44px + var(--safe-area-inset-top)) 0 0;
            overflow hidden;
            position relative;

    .msg-gift-content
        width 50vw;

        .msg-gift-picture
            width 50vw;
            position relative;

            img
                width 100%;
                height auto

        .msg-gift-text
            position relative;
            width 50vw;
            font-size 13px;
            background-image -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
            color transparent;
            background-clip text;

            span
                padding 0 2px;
                font-weight 700;
</style>
